/* the norm */    
#gritter-notice-wrapper
    position fixed
    top 70px
    right 20px
    width auto
    z-index 9999
    
#gritter-notice-wrapper.top-left
    left 20px
    right auto
    
#gritter-notice-wrapper.bottom-right
    top auto
    left auto
    bottom 20px
    right 20px
    
#gritter-notice-wrapper.bottom-left
    top auto
    right auto
    bottom 20px
    left 20px
    
.gritter-item-wrapper
    position relative
    margin 0 0 10px 0
    background-image none !important
    box-shadow 0 2px 10px rgba(50, 50, 50, 0.5)
    background rgba(50, 50, 50, 0.92)

.gritter-top
    height 10px
    
.hover .gritter-top
    background-position right -30px
    
.gritter-bottom
    height 8px
    margin 0
    
.hover .gritter-bottom
    background-position bottom right
    
.gritter-item
    display block
    color color-light-gray
    padding 2px 11px 2px 11px
    font-size 11px
    font-family verdana
    
.hover .gritter-item
    background-position right -40px
    
.gritter-item p
    padding 0
    margin 0
    word-wrap break-word
    
.gritter-close
    display none
    position absolute
    top 5px
    left 3px
    cursor pointer
    width 30px
    height 30px
    
.gritter-title
    font-size 14px
    font-weight bold
    padding 2px 0 7px 0
    display block
    text-shadow 1px 1px 0 color-black // Not supported by IE

.gritter-link
    position relative
    height auto
    color color-black
    font-weight bold
    opacity 0.7
    display inline-block
    &:hover
        opacity 1
        color color-link-hover
    
.gritter-image
    width 48px
    height 48px
    float left
    
.gritter-with-image,
.gritter-without-image
    padding 0
    margin-left 5px
    margin-right 20px
    
.gritter-with-image
    width auto
    min-width 150px
    max-width 200px
    float right
    
/* for the light (white) version of the gritter notice */
.gritter-light
    .gritter-item,
    .gritter-bottom,
    .gritter-top,
    .gritter-close
        color #222
    
.gritter-light .gritter-title
    text-shadow none

.gritter-item-wrapper.gritter-info
    background rgba(49, 81, 133, 0.92)

.gritter-item-wrapper.gritter-error
    background rgba(153, 40, 18, 0.92)

.gritter-item-wrapper.gritter-success
    background rgba(89, 131, 75, 0.92)

.gritter-item-wrapper.gritter-warning
    background rgba(190, 112, 31, 0.92)

.gritter-item-wrapper.gritter-light
    background rgba(245, 245, 245, 0.95)
    border 1px solid #BBB

.gritter-item-wrapper.gritter-light.gritter-info
    background rgba(232, 242, 255, 0.95)

.gritter-item-wrapper.gritter-light.gritter-info .gritter-item
    color #4a577d

.gritter-item-wrapper.gritter-light.gritter-error
    background rgba(255, 235, 235, 0.95)

.gritter-item-wrapper.gritter-light.gritter-error .gritter-item
    color #894a38

.gritter-item-wrapper.gritter-light.gritter-success
    background rgba(239, 250, 227, 0.95)

.gritter-item-wrapper.gritter-light.gritter-success .gritter-item
    color #416131

.gritter-item-wrapper.gritter-light.gritter-warning
    background rgba(252, 248, 227, 0.95)

.gritter-item-wrapper.gritter-light.gritter-warning .gritter-item
    color #946446

.gritter-item p
    line-height 1.8

.gritter-close
    left auto
    right 3px
    background-image none
    width 18px
    height 18px
    line-height 17px
    text-align center
    border 2px solid transparent
    border-radius 16px
    color #e17b67
    &:before
        font-family FontAwesome
        font-size 16px
        content "\f00d"
    &:hover
        color #FFF !important

.gritter-info .gritter-close
    color #ffa500

.gritter-error .gritter-close,
.gritter-success .gritter-close,
.gritter-warning .gritter-close
    color #ffea07

.gritter-light
    .gritter-item,
    .gritter-bottom,
    .gritter-top,
    .gritter-close
        background-image none
        color #444

    .gritter-title
        text-shadow none

    .gritter-close
        &:hover
            color #8a3104 !important

.gritter-center
    position fixed
    left 33%
    right 33%
    top 33%

@media only screen and (max-width: 767px)
    .gritter-center
        left 16%
        right 16%
        top 30%

@media only screen and (max-width: 480px)
    .gritter-center
        left 30px
        right 30px

@media only screen and (max-width: 320px)
    .gritter-center
        left 10px
        right 10px